<template>
	<view>
		<form @submit="submit">
			<view class="gui-margin-top" style="margin-left: 20rpx;">
				<textarea v-model="content" name="content" value="" placeholder="说点什么..."
					class="gui-textarea gui-bg-gray gui-border-box" style="width:690rpx;height: 300rpx;" />
			</view>

			<view class="gui-margin-top">
				<gui-upload-images @change="change" ref="uploadimgcom" @uploaded="uploaded"
					:uploadServerUrl="photo_upload_url"></gui-upload-images>
			</view>

			<view class="gui-margin-top" @tap="choose_location()">
				<text class="gui-grids-icon gui-icons"
					style="text-align: left;margin-left: 20rpx;font-size: 30rpx;">&#xe61c; {{address}}</text>
			</view>

			<view style="height: 500rpx;"></view>
			<view class="demo gui-margin-top-large">
				<button type="default" class="gui-button gui-bg-blue gui-noborder" formType="submit">
					<text class="gui-color-white gui-button-text">发表</text>
				</button>
			</view>

			<gui-iphone-bottom></gui-iphone-bottom>

		</form>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				address: '所在位置',
				photo_upload_url: this.serverUrl + '/api.common/upload',
				// 记录需要上传的图片数据
				needPploadedImgs: [],
				// 表单数据存储
				formData: {
					name1: '',
					name2: '',
					name3: '',
					name4: '',
				},
				// 密码可视 类型切换
				isPwd: true,
				// picker 
				gender: ['请选择性别', '男', '女'],
				genderIndex: 0
			}
		},
		onLoad: function(query) {
			this.$globalMethod();
		},
		methods: {
			// 记录选择图片时的待提交数据
			change: function(e) {
				this.needPploadedImgs = e;
				this.uploaded(this.needPploadedImgs);
			},
			choose_location() {
				let _this = this;
				uni.chooseLocation({
					success: function(res) {
						_this.address = res.address + res.name;
					},
					fail: function(e) {
						uni.showToast({
							title: e.errorMsg,
							icon: 'error'
						});
					}
				});

			},
			uploaded: function(uploadedImgs) {
				let _this = this;
				console.log('图片上传完毕，开始提交数据');
				console.log(uploadedImgs);

				// 至此数据以及收集完毕
				// 请自己完成数据提交工作

				console.log('uploadedImgsLength', uploadedImgs.length);

				_this.needPploadedImgs.forEach((image, index) => {
					uni.uploadFile({
						url: _this.serverUrl + '/api.common/upload', //仅为示例，非真实的接口地址
						filePath: image.url,
						name: 'laytpUploadFile',
						header: {
							token: _this.token
						},
						success: (uploadFileRes) => {

							var return_data = JSON.parse(uploadFileRes.data);
							if (return_data.code == 0) {
								// console.log(221, i);

								_this.needPploadedImgs[index].progress = 100;
								_this.needPploadedImgs[index].url = return_data.data.path;
							} else {
								uni.showToast({
									title: return_data.msg,
									icon: 'error'
								})
							}
						},
						fail: function(e) {
							console.log(e);
							uni.showToast({
								title: '网络请求失败，请稍后重试',
								icon: 'error'
							})
						}
					});
				})


			},
			// 清空输入框的值
			clearName2: function() {
				console.log(11);
				this.formData.name2 = '';
			},
			// 监听输入框输入事件
			inputting: function(e) {
				var name2Val = e.detail.value;
				console.log(name2Val);
			},
			// 密码可视 类型切换
			changePwdType: function() {
				this.isPwd = !this.isPwd;
			},
			// picker 切换
			pickerChange: function(e) {
				console.log(e);
				this.genderIndex = e.detail.value;
				this.formData.name4 = this.gender[this.genderIndex];
			},
			// switch 开关
			switchChange: function(e) {
				this.formData.name6 = e.detail.value;
			},
			// 表单提交
			submit: function(e) {
				// 部分能够获得的表单数据 在 e 对象保存
				// 不支持表单直接获取的数据通过事件记录
				// 最终整理获得完整的表单记录
				var fromData = e.detail.value;
				console.log(fromData);

				var needPploadedImgs = this.needPploadedImgs;
				if (needPploadedImgs.length < 1) {
					uni.showToast({
						title: "请选择生活照",
						icon: "none"
					});
					return;
				}
				var life_photo_arr = [];
				for (var i = 0; i < needPploadedImgs.length; i++) {
					life_photo_arr.push(needPploadedImgs[i].url);
				}

				fromData['img_url_arr'] = life_photo_arr;
				fromData['address'] = this.address;

				if (fromData['address'] == '所在位置') {
					fromData['address'] = '';
				}


				let _this = this;


				_this.graceJS.post(_this.serverUrl + '/api.dynamic/add_dynamic', fromData, 'json', {
						token: _this.token
					}, (res) => {

						if (res.code == 0) {

							uni.navigateTo({
								url: '/pages/my/player_index',
								success: function() {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					(e) => {
						console.log(e);
						uni.showToast({
							title: '网络请求失败，请稍后再试',
							icon: 'error'
						});
					})


			}
		}
	}
</script>

<style>
	.gui-text-small {
		line-height: 50rpx;
	}

	.demo {
		width: 100%;
		margin: 10rpx;
	}

	.button {
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 8rpx;
		margin: 10rpx;
	}

	.button-text {
		font-size: 38rpx;
		text-align: center;
	}
</style>